<script>
import { mapGetters } from 'vuex'
import { axios } from '@/utils/request'

export default {
  name: 'guanliyuan_form',
  data() {
    return {
      isUserInfo: this.$route.path === '/userInfo',
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      src: null,
      form: {
        checkKey: Math.random(),
        adminLogin: '',
        adminPassword: '',
        confirmPwd: '',
        legalRepresent: '',
        adminCard: '',
        adminSex: '',
        adminJob: '',
        adminTel: '',
        adminPhone: '',
        adminFax: '',
        checkCode: '',
        adminEmail: '',
      },
      rules: {
        adminLogin: [{ required: true, message: '请输入管理员登录号' }],
        adminPassword: [{ required: true, message: '请输入管理员密码' }],
        confirmPwd: [{ required: true, message: '请输入重复密码' }],
        legalRepresent: [{ required: true, message: '请输入管理员姓名' }],
        adminCard: [{ required: true, message: '请输入管理员身份证号' }],
        adminSex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        adminJob: [{ required: true, message: '请输入职务' }],
        adminPhone: [{ required: true, message: '请输入手机号码' }],
        checkCode: [{ required: true, message: '请输入验证码' }],
      },
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {
    this.fetchVerificationCode()
    if (this.user) {
      this.updateFormValues(this.user)
    }
  },
  props: {
    canFix: {
      type: Boolean,
    },
    // 基本类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    user: {
      type: Object,
    },
  },
  watch: {
    user: {
      handler: function(newVal, oldVal) {
        this.updateFormValues(newVal)
      },
    },
  },

  methods: {
    getInfo(v) {
      return axios.post('/register/subjectLegal/queryByInfo', { sysUserId: v.sysUserId }).then(r => {
        return r.result
      })
    },
    updateFormValues(r) {
      this.getInfo(r).then(newValues => {
        // 使用 Vue.set 或 this.$set 来更新 form 对象的属性
        Object.keys(this.form).forEach(key => {
          if (key === 'bidderCodeType') {
            newValues[key] = newValues[key]?.split(',')
          }
          this.$set(this.form, key, newValues[key])
        })
      })
    },
    fetchVerificationCode() {
      // 模拟发送请求获取验证码
      console.log('正在获取验证码...')
      this.form.checkKey = Math.random()
      // 示例：发送 AJAX 请求
      this.$http
        .get('register/common/randomImage/' + this.form.checkKey)
        .then(response => {
          // 可以在此处更新 UI 或执行其他操作
          this.src = response.result
        })
        .catch(error => {
          console.error('获取验证码失败:', error)
        })
    },
    error() {
      this.fetchVerificationCode()
    },
    validateForm() {
      return new Promise((resolve, reject) => {
        this.$refs['form'].validate(valid => {
          if (valid) {
            resolve(this.form) // 验证通过，返回表单值
          } else {
            reject('表单验证失败') // 验证失败，返回错误信息
          }
        })
      })
    },
  },
}
</script>

<template>
  <div class="" style="width:100%">
    <h2>管理员信息</h2>
    <a-form-model ref="form" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <!-- <a-form-model-item v-if="!isUserInfo" prop="adminLogin" label="注册账号管理员登录号">
        <a-input v-model="form.adminLogin" :disabled="!canFix" />
      </a-form-model-item> -->
      <a-form-model-item v-if="!isUserInfo" prop="adminPassword" label="注册账号管理员密码">
        <a-input v-model="form.adminPassword" type="password" :disabled="!canFix" />
      </a-form-model-item>
      <a-form-model-item v-if="!isUserInfo" prop="confirmPwd" label="重复密码">
        <a-input v-model="form.confirmPwd" type="password" :disabled="!canFix" />
      </a-form-model-item>
      <a-form-model-item prop="legalRepresent" label="注册账号管理员姓名">
        <a-input v-model="form.legalRepresent" :disabled="!canFix" />
      </a-form-model-item>
      <a-form-model-item prop="adminCard" label="注册账号管理员身份证号">
        <a-input v-model="form.adminCard" :disabled="!canFix" />
      </a-form-model-item>
      <a-form-model-item prop="adminSex" label="性别">
        <a-radio-group v-model="form.adminSex" :disabled="!canFix">
          <a-radio value="1">
            男
          </a-radio>
          <a-radio value="2">
            女
          </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item prop="adminJob" label="职务">
        <a-input v-model="form.adminJob" :disabled="!canFix" />
      </a-form-model-item>
      <a-form-model-item prop="adminTel" label="电话号码">
        <a-input v-model="form.adminTel" :disabled="!canFix" />
      </a-form-model-item>
      <a-form-model-item prop="adminPhone" label="手机号码">
        <a-input v-model="form.adminPhone" :disabled="!canFix" />
      </a-form-model-item>
      <a-form-model-item prop="adminFax" label="传真号码">
        <a-input v-model="form.adminFax" :disabled="!canFix" />
      </a-form-model-item>
      <a-form-model-item prop="adminEmail" label="电子邮件">
        <a-input v-model="form.adminEmail" :disabled="!canFix" />
      </a-form-model-item>
      <a-form-model-item prop="checkCode" label="验证码">
        <a-input style="width:150px;" v-model="form.checkCode" :disabled="!canFix" />
        <img :src="src" alt="" @click="fetchVerificationCode" />
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<style scoped></style>
